import React from 'react';
import { Button, Switch, Space, Table, Typography, Card } from 'antd';
import type { TableProps } from 'antd';
import './index.less'
interface RecordType {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  address1: string;
  address2: string;
  address3: string;
}

const fixedColumns: TableProps<RecordType>['columns'] = [
  {
    title: '楼层',
    dataIndex: 'cheng',
    width: 100,
    fixed: 'left',
    onCell: (record) => ({
      rowSpan: record.id % 3 === 0 ? 3 : 0,
    }),
  },
  {
    title: '控制器ID',
    dataIndex: 'firstName',
    width: 120,
    fixed: 'left',
    onCell: (record) => ({
      rowSpan: record?.id % 3 === 0 ? 3 : 0,
    }),
  },
  {
    title: '位子',
    dataIndex: 'lastName',
    width: 120,
    fixed: 'left',
    onCell: (record) => ({
      rowSpan: record?.id % 3 === 0 ? 3 : 0,
    }),
  },
  {
    title: '门锁数量',
    dataIndex: 'number',
    width: 120,
    fixed: 'left',
    onCell: (record) => ({
      rowSpan: record?.id % 3 === 0 ? 3 : 0,
    }),
  },
  {
    title: '门锁ID',
    dataIndex: 'age',
    width: 150,
    onCell: (record) => ({
      colSpan: record?.id % 4 === 0 ? 2 : 1,
    }),
  },
  {
    title: '房间ID',
    dataIndex: 'address3',
    width: 150,
    onCell: (record) => ({
      colSpan: 1
    }),
  },
  {
    title: '信号',
    dataIndex: 'address1',
    onCell: (record) => ({
      colSpan: record?.id % 4 === 0 ? 0 : 1,
    }),
    width: 150,
    render: (text, record) => {
      let color = 'black'; // 默认颜色
      if (text === '强') {
        color = 'green'; // 强信号为绿色
      } else if (text === '弱') {
        color = 'red'; // 弱信号为红色
      }
      return <span style={{ color: color }}>{text}</span>;
    }
  },
  {
    title: '手动绑定',
    dataIndex: 'address2',

  },

  {
    title: '操作',
    width: 150,

    render: () => (
      <Space>
        <Typography.Link>更换绑定</Typography.Link>
      </Space>
    ),
  },
];

const getData = (count: number) => {
  const data: RecordType[] = new Array(count).fill(null).map((_, index) => {
    const chengValue = Math.ceil((index + 1) / 3).toString();
    return {
      id: index,
      cheng: chengValue,
      firstName: `B800000A`,
      lastName: `B栋1`,
      number: 3,
      age: 56788831 + (index % 10),
      address1: `强`,
      address2: `是`,
      address3: `030010${index}`,
    };
  });





  return data; // 保留前六条数据
};

const DoorLockinstall: React.FC = () => {
  const [fixed, setFixed] = React.useState(true);
  const [count, setCount] = React.useState(6);

  const tblRef = React.useRef<any>(null);
  const data = React.useMemo(() => getData(count), [count]);

  const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
    if (!fixed) {
      return fixedColumns.slice(0, 3);
    }

    return fixedColumns;
  }, [fixed]);

  return (
    <>
      <Card>
        <Button type="primary" ghost>进入自动安装</Button>  &emsp; <Button disabled>停止自动安装</Button>
      </Card>
      <br />
      <Card>
        <Table
          columns={mergedColumns}
          rowKey="id"
          dataSource={data}
          pagination={false}
          ref={tblRef}
          className="custom-table"
          rowClassName={(record, index) => index % 1 === 0 ? 'even-row' : 'odd-row'}
        />
      </Card>

    </>

  );
}

export default DoorLockinstall; 